<template>
    <el-dialog :visible.sync="visible" width="1100px" top="8vh" class="areaDialog" @close="cancel" :show-close="false">
      <p
        style="text-align: center; margin: 0 0 1.25rem"
        class="text-primary cursor-pointer font-size-20"
      >
        {{ $t('certificate.area.belongNumber') }}
      </p>
      <div class="menu" v-loading="pageLoad">
        <div class="notPunchCard">
          <p>{{ $t('certificate.area.unselectedPersonnel') }}</p>
          <el-input
              :placeholder="$t('mobileAttendance.attendance.filterKeyword')"
              v-model="filterText"
              clearable
            ></el-input>
  
          <!-- <el-checkbox  class="m-2" v-model="checked" @change="heandCheckAll()">全选</el-checkbox>  -->
          <el-tree
            class="elTree"
            :data="data"
            show-checkbox
            node-key="value"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            @check-change="handleCheck"
            default-expand-all
            ref="tree"
          >
          </el-tree>
        </div>
        <div class="punchCard">
          <span>
            <p>{{ $t('certificate.area.selectedPersonnel') }}</p>
          </span>
          <div class="select">
            <template v-if="tableData?.length == 0">
              <div class="notData">{{ $t('mobileAttendance.attendance.noData') }}</div>
            </template>
            <el-table v-else :data="tableData">
              <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label">
                <template slot-scope="scope" >
                    <el-checkbox v-if="item.scope == 'checked'" v-model="scope.row[item.prop]" :true-label="1" :false-label="0" @change="checkboxChange(scope.row)"></el-checkbox>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer">
            <el-button type="primary" @click="submit">{{ $t('global.confirm') }}</el-button>
            <el-button @click="cancel">{{$t('global.cancel') }}</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  import { getAction } from '@/api/manage'
  export default {
    props:{
        tableColumn:{
            type:Array,
            default:()=>[]
        }
    },

    data() {
      return {
        visible: false,
        isActive: false,
        checked: false, //checkbox的值
        tableData: [],
        pageLoad: false,
        dialogVisible: false,
        filterText: "",
        uuid:'',
        name: "",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
        value: [],
        ruleForm:{},
        url:{
            list:''
        }
      };
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
    },
    methods: {
        init(url,uuid){
            this.url.list = url
            this.pageLoad = true;
            this.uuid = uuid;
            this.visible = true
            this.details();
        },
        // 关闭弹窗清空数据
        close(){
            this.$emit('close')
        },
        // 删除列表某一项
        del(value) {
            this.$refs.tree.setChecked(value, false); //取消左侧复选框的选中状态
            this.tableData.splice(value, 1);
        },
        handleClose() {
            this.value = [];
            this.tableData = [];
            this.visible = false;
            this.pageLoad = false;
            this.$refs.tree.setCheckedKeys([]);
        },
        handleNodeClick(data) {
        },
        heandCheckAll(val) {
            if (this.checked) {
            //全选
            this.$refs.tree.setCheckedNodes(this.data);
            } else {
            //取消选中
            this.$refs.tree.setCheckedKeys([]);
            }
        },
        //查询名称
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
    
        //复选框点击事件
        handleCheck(data, change) {
        //   let nodes = this.$refs.tree
        //     .getCheckedNodes()
        //     .concat(this.$refs.tree.getHalfCheckedNodes());
            let nodes = this.$refs.tree.getCheckedNodes([]);
            // let filterNodes = data.filter((node) => {
            // // 过滤出子节点，也就是不含childred字段的节点数据
            //     return node.children === undefined;
            // });
            // this.tableData = nodes.map(v=>{
            //     const { name, value, ...rest } = v;
            //     return {
            //         workerName:v.name,
            //         wxappUserUuid:v.value,
            //         ...rest
            //     }
            // }) //赋值给表格数据
            if(data.children!==undefined)return
            const { name, value, ...rest } = data;
            for (let obj of this.tableData) {
                if (obj.wxappUserUuid == value) {
                    return;
                }
            }
            this.tableData.push({
                workerName:name,
                wxappUserUuid:value,
                ...rest
            })
        },
        //删除按钮
        deleteRow(index, rows, value) {
            this.$refs.tree.setChecked(value, false); //取消左侧复选框的选中状态
            rows.splice(index, 1); //从tableData中删除数据
        },
        //复选框默认选中状态,应在请求数据处调用
        //现在用的是本地数据，如果导入的是请求后的来的数据，并且有返回是否选中的字段，可以将已选中的那些数据的id遍历出来一个数组，类似于[1,2,3],然后放到下方；
        selection(arrDa) {
            this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys([], true); //默认选中状态
            });
        },
        checkboxChange(data){
            this.replaceNodeById(this.data, data);
            let nodes = this.$refs.tree.getCheckedNodes([]);
        },
        replaceNodeById(tree, newNode) {
            for (let i = 0; i < tree.length; i++) {
                const currentNode = tree[i];
                // 检查当前节点的 ID 是否与需要替换的节点的 ID 相同
                if (currentNode.value === newNode.wxappUserUuid) {
                    // 替换当前节点
                    const { workerName,wxappUserUuid, ...rest } = newNode;
                    tree[i] = {
                        name: newNode.workerName,
                        value: newNode.wxappUserUuid,
                        ...rest
                    }
                    return true; // 替换完成
                }
                // 如果有子节点，递归调用
                if (currentNode.children && currentNode.children.length > 0) {
                    const found = this.replaceNodeById(currentNode.children, newNode);
                    if (found) {
                        return true; // 在子节点中找到并替换
                    }
                }
            }
            return false; // 没有找到需要替换的节点
        },
        cancel(){
            this.visible = false;
            this.$refs.tree.setCheckedKeys([]);
        },
        details(){
            this.tableData = [];
            getAction(this.url.list,{uuid:this.uuid}).then(res=>{
                console.log(res);
                this.data = res.data.list
                // let hasObject = res.data.checked.some(item=>typeof item==='object' && item !== null)
                // let checked = []
                // if(hasObject){
                //     this.tableData = res.data.checked
                //     checked = res.data.checked.map(v=>{
                //         return v.wxappUserUuid
                //     })
                // }else{
                //     checked = res.data.checked
                // }
                this.$nextTick(()=>{
                    this.$refs.tree.setCheckedKeys(res.data.checked);
                    this.pageLoad = false;
                })
            }).finally(()=>{
    
            })
        },
        //添加考勤人员  
        submit(type,ruleForm) {
            this.pageLoad = true
            this.$emit('submit',this.uuid,this.tableData)
        },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .menu {
    display: flex;
    justify-content: space-between;
    padding: 12.8px;
  }
  .elTree {
    margin-top: 15px;
    height: 408px;
    padding: 12.8px;
    border-radius: 20px;
    overflow: auto;
  }
  .notPunchCard {
    // flex-grow: 1;
    width: 50%;
    margin-right: 20px;
    background: rgba(224, 224, 224, 0.185);
    border-radius: 1.25rem;
    padding: 20px;
  }
  .punchCard {
    // flex-grow: 1;
    width: 50%;
    background: rgba(224, 224, 224, 0.185);
    border-radius: 20px;
    padding: 20px;
  }
  .select {
    height: 450px;
    overflow: auto;
    margin-top: 30px;
    background: white;
    border-radius: 20px;
    padding: 10px;
  }
  .notData {
    text-align: center;
    position:relative;
    top:50%;
    transform:translateY(-50%);
  }
  .select-item {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    padding-left: 20px;
    line-height: 40px;
    cursor: pointer;
    background-color: white;
    color: #1F2329;
    &.active {
      background: #EDEEEE;
      color: #1F2329; // 选中字体背景跟着改变
    }
    i {
      font-style: normal;
      float: right;
      font-size: 20px;
      margin-top: 10px;
      padding-right: 15px;
      display: none; //默认删除图标隐藏
    }
    &.active i {
      display: block; // 鼠标放上去删除图标显示
    }
  }
.areaDialog{
  ::v-deep .el-dialog__header{
    display: none;
  }
}
  </style>